<template>
  <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
    <div :class="[prefixCls + '-submenu-title']"
         ref="reference"
         @click.stop="handleClick"
         v-clickoutside="handleMouseleave"
         :style="titleStyle">
      <img :class="iconClass" v-if="this.icon" :src="this.icon" alt="icon" />
      <span v-html="text"></span>
      <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']" />
    </div>
    <collapse-transition v-if="mode === 'vertical'">
      <ul :class="[prefixCls]" v-show="opened">
        <slot></slot>
      </ul>
    </collapse-transition>
    <transition name="slide-up" v-else>
      <Drop v-show="opened"
            placement="bottom"
            ref="drop"
            :class="dropClass"
            :style="dropStyle"
            :data-transfer="transfer"
            v-transfer-dom
            @mouseenter="handleMouseenterDrop">
        <ul :class="[prefixCls + '-drop-list']">
          <slot></slot>
        </ul>
      </Drop>
    </transition>
  </li>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
